import  './styles.css'
import Input from '@ui/RJMart/input'
import searchicon from "@assets/searchicon.png";
import EventApi from "@module/EventApi";
import '@page/common/css/commheader.css'
import usePartState from "@module/usePartState";
import Uts from "@module/Uts"
import urlHook from "@page/common/utils/urlHook";


export default function SearchTab(props) {

    const [stateObj, updateState] = usePartState({
        tabIndex:1,
    });
    const {changeTab,changeText,doSearchText}=props;
    const {tabIndex,searchText}=stateObj

    //生命周期 页面渲染完后再执行，每次刷新前也执行
    React.useEffect(() => {
    }, []);



    function setTabIndex(index) {
        updateState({tabIndex:index})
        changeTab(index)
    }

    let permissions = Uts.storage.get("STORE_USERPERMISSION");
    let canPublish=false;
    if(permissions){
        if(permissions.indexOf('普通竞价发布')>-1||permissions.indexOf('高级竞价发布')>-1){
            canPublish=true;
        }
    }

    return (
        <div className="bidlist-st-wrapper">
            <div className={'bidlist-st-left'}>
                <div
                    onClick={()=>setTabIndex(1)}
                    className={tabIndex==1?'bidlist-st-left-on ':'bidlist-st-border-left1 bidlist-st-left-off'}>
                    <p>竞价中</p>
                </div>
                <div
                    onClick={()=>setTabIndex(2)}
                    className={tabIndex==2?'bidlist-st-left-on bidlist-st-border-left':'bidlist-st-left-off'}>
                    <p>已结束</p>
                </div>
            </div>

            {
                canPublish&&(
                    <div
                        onClick={()=>{
                            if(Uts.getCookie('orgId') == 3){
                                var hash = '#newBid' ;
                                window.location.href = Uts.getCookie('HREF_FOR_ZD') + hash;
                            }else{
                                window.location.href = urlHook.publishBid;
                            }
                        }}
                        className={'bidlist-pub'}>
                        发布竞价
                    </div>
                )
            }
            <SearchInput
                doSearchText={doSearchText}
                changeText={changeText}
            />
            
        </div>
    );
}



function SearchInput(props) {
    const [stateObj, updateState] = usePartState({
        searchText:''
    });
    const {doSearchText,changeText}=props;
    const {searchText}=stateObj;

    function inputText(txt) {
        updateState({
            searchText:txt
        })
        changeText(txt)
    }



    return(
        <div
            style={{
                display: "flex",
                position: "relative"
            }}
        >
            <img
                src={searchicon}
                className={"search-input-search-icon"}
            />
            <input
                type="text"
                className={"search-detail-searchcomp search-detail-searchcomp-border1"}
                placeholder={'请输入竞价号 / 竞价单位'}
                onChange={e => {
                    // console.log(e.target.value)
                    inputText(e.target.value)
                }}
                onKeyUp={e=>{
                    if(e.keyCode==13){
                        doSearchText()
                    }
                }}
            />
            <div
                onClick={doSearchText}
                className={"search-input-comp"}
            >
                <p style={{ color: "#fff", fontSize: 14 }}>
                    搜索
                </p>
            </div>
        </div>
    )
}